<template>
  <view class="preview-container">
    <!-- 公司名称和基本信息 -->
    <view class="company-info">
      <text class="company-name">{{ formData.companyName }}</text>
      <text class="company-details">
        {{ formData.staffSize }}，{{ formData.industry }}
      </text>
    </view>

    <!-- 工作时间和福利 -->
    <view class="working-hours-benefits">
	  <view class="info" @click="gotoMore">
      <text class="working-hours">{{ formData.workingHours }}</text>
	  <uni-icons type="arrowright" size="16" color="#fff"></uni-icons>
	  </view>
      <text class="benefits">{{ formData.benefits }}</text>
    </view>

    <!-- 公司地址 -->
    <view class="company-address">
      <text class="address-title">公司地址</text>
      <text class="address-value">{{ formData.companyName }}</text>
    </view>

    <!-- 公司介绍 -->
    <view class="company-introduction">
      <text class="introduction-title">公司介绍</text>
      <text class="introduction-value">{{ formData.companyIntroduction }}</text>
    </view>

    <!-- 公司视频和公司相册切换 -->
    <view class="card">
		<text class="title">公司相册</text>
      <!-- 切换按钮 -->
      <view class="tabs">
        <view
          class="tab"
          :class="{ active: currentMediaTab === 'video' }"
          @click="switchMediaTab('video')"
        >
          公司视频
        </view>
        <view
          class="tab"
          :class="{ active: currentMediaTab === 'album' }"
          @click="switchMediaTab('album')"
        >
          公司相册
        </view>
      </view>

      <!-- 视频展示 -->
      <view v-if="currentMediaTab === 'video'" class="tab-content">
        <scroll-view class="media-scroll" scroll-x>
          <view class="media-row">
            <video
              v-for="(video, index) in videos"
              :key="index"
              :src="video"
              controls
              class="media-item"
            ></video>
          </view>
        </scroll-view>
      </view>

      <!-- 相册展示 -->
      <view v-if="currentMediaTab === 'album'" class="tab-content">
        <scroll-view class="media-scroll" scroll-x>
          <view class="media-row">
            <image
              v-for="(image, index) in albumImages"
              :key="index"
              :src="image"
              class="media-item"
            ></image>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 工商信息 -->
    <view class="business-info">
      <text class="info-title">工商信息</text>
      <text class="info-item">公司全称：{{ formData.companyName }}</text>
      <text class="info-item">法定代表人：法人</text>
      <text class="info-item">注册资本：100万人民币</text>
      <text class="info-item">成立日期：0000-00-00</text>
    </view>
	<view class="footer">
	  <view class="other">
	    <image class="img" src="/static/img/preview.svg"></image>
	    <text class="footer-text">预览</text>
	  </view>
	  <view class="other" @click="gotoShare">
	    <image class="img last" src="/static/img/share.svg"></image>
	    <text class="footer-text">分享</text>
	  </view>
	</view>
	 
	     <!-- 居中显示的弹窗 -->
	     <uni-popup ref="centerPopup" type="center" :mask-click="true" @maskClick="handleMaskClick">
	       <view class="share-popup center-popup">
	         <view class="title">佛山市知水尚远网络科技有限公司</view>
	         <image src="/static/img/email.png" class="qr-code" mode="widthFix" />
	         <view class="tip">保存小小程序码素材可用于公众号文章、内</view>
	       </view>
	     </uni-popup>
	     
	     <!-- 底部显示的弹窗 -->
	     <uni-popup ref="bottomPopup" type="bottom" :mask-click="true" @maskClick="handleMaskClick">
	       <view class="share-popup bottom-popup">
	         <view class="share-options">
	           <button class="share-button" @click="shareToWeChat">微信好友</button>
	           <button class="share-button" @click="saveToAlbum">保存到相册</button>
	           <button class="share-button" @click="downloadQRCode">下载二维码</button>
	         </view>
	       </view>
	     </uni-popup>
	  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        companyName: "佛山市知水尚远网络科技有限公司",
        staffSize: "0-60人",
        industry: "计算机服务",
        workingHours: "上午9：00-18：00 双休 不加班",
        benefits: "五险一金",
        companyIntroduction: "佛山市知水尚远网络科技有限公司",
        companyPhotos: "公司照片",
        companyVideos: "公司视频",
      },
      currentMediaTab: "video", // 当前选中的媒体类型（video 或 album）
      videos: [
        "https://example.com/video1.mp4",
        "https://example.com/video2.mp4",
      ], // 视频列表
      albumImages: [
        "https://example.com/image1.jpg",
        "https://example.com/image2.jpg",
      ], // 图片列表
    };
  },
  onLoad(options) {
    if (options.data) {
      const data = JSON.parse(options.data);
      this.formData = { ...this.formData, ...data };
    }
  },
  methods: {
    // 切换媒体类型
    switchMediaTab(tab) {
      this.currentMediaTab = tab;
    },
	gotoMore(){
		uni.navigateTo({
			url:"/pages/form/company-home/workhours_benefits",
		});
	},
	gotoShare(){
		this.showCenterPopup(); // 打开居中弹窗
		this.showBottomPopup(); // 打开底部弹窗
	},
    showCenterPopup() {
	   this.$refs.centerPopup.open();
	 },
	 // 显示底部弹窗
	 showBottomPopup() {
	   this.$refs.bottomPopup.open();
	 },
	 // 点击遮罩层时关闭两个弹窗
	   handleMaskClick() {
	     this.$refs.centerPopup.close(); // 关闭居中弹窗
	     this.$refs.bottomPopup.close(); // 关闭底部弹窗
	   },
 // 分享到微信好友
	shareToWeChat() {
	  uni.showToast({
		title: "分享到微信好友",
		icon: "none",
	  });
	  // 这里可以调用微信分享 API
	},
 // 保存到相册
	saveToAlbum() {
	  uni.showToast({
		title: "保存到相册",
		icon: "none",
	  });
	  // 调用保存图片到相册的 API
	  uni.downloadFile({
		url: "/static/qr-code.png", // 二维码图片路径
		success: (res) => {
		  if (res.statusCode === 200) {
			uni.saveImageToPhotosAlbum({
			  filePath: res.tempFilePath,
			  success: () => {
				uni.showToast({
				  title: "保存成功",
				  icon: "success",
				});
			  },
			  fail: () => {
				uni.showToast({
				  title: "保存失败",
				  icon: "none",
				});
			  },
			});
		  }
		},
	  });
	},

	// 下载二维码
	downloadQRCode() {
	  uni.showToast({
		title: "下载二维码",
		icon: "none",
	  });
	  // 调用下载文件的 API
	  uni.downloadFile({
		url: "/static/qr-code.png", // 二维码图片路径
		success: (res) => {
		  if (res.statusCode === 200) {
			uni.showToast({
			  title: "下载成功",
			  icon: "success",
			});
		  }
		},
		fail: () => {
		  uni.showToast({
			title: "下载失败",
			icon: "none",
		  });
		},
	  });
	  },
  },
};
</script>

<style scoped>
.preview-container {
  width: 390px;
  height: 984px;
  padding: 20px;
  background: linear-gradient(90deg, #a7a9ff 0%, #c8cbff 100%);
}

.company-info {
  margin-bottom: 20px;
}

.company-name {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 10px;
}

.company-details {
  font-size: 14px;
  color: #fff;
}

.working-hours-benefits {
  margin-bottom: 20px;
}

.working-hours-benefits .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.working-hours {
  font-size: 14px;
  color: #fff;
  display: block;
  margin-bottom: 10px;
}

.benefits {
  font-size: 14px;
  color: #fff;
}

.company-address {
  margin-bottom: 20px;
}

.address-title {
  font-size: 16px;
  color: #fff;
  display: block;
  margin-bottom: 10px;
}

.address-value {
  font-size: 14px;
  color: #fff;
}

.company-introduction {
  margin-bottom: 20px;
}

.introduction-title {
  font-size: 16px;
  color: #fff;
  display: block;
  margin-bottom: 10px;
}

.introduction-value {
  font-size: 14px;
  color: #fff;
}

.card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card .title {
  font-size: 16px;
  color: #fff;
  display: block;
  margin-bottom: 10px;
}

.tabs {
  display: flex;
  margin-bottom: 10px;
}

.tab {
  width: 55px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  text-align: center;
  color: #fff;
  border-radius: 113px;
  background: #8a8cf3;
  margin-right: 5px;
}

.media-scroll {
  white-space: nowrap;
}

.media-row {
  display: inline-flex;
  gap: 10px;
}

.media-item {
  width: 300px;
  height: 225px;
  background-color: #ddd;
  border-radius: 5px;
}

.business-info {
  margin-bottom: 20px;
}

.info-title {
  font-size: 16px;
  color: #fff;
  display: block;
  margin-bottom: 10px;
}

.info-item {
  font-size: 14px;
  color: #fff;
  display: block;
  margin-bottom: 5px;
}

.footer {
  display: flex;
  justify-content: flex-end; /* 将内容靠右对齐 */
  gap: 20px; /* 图标之间的间距 */
  margin-top: 20px; /* 与上方内容的间距 */
}

.other {
  display: flex;
  flex-direction: column; /* 垂直排列图标和文字 */
  align-items: center; /* 水平居中 */
  gap: 5px; /* 图标和文字之间的间距 */
}

.footer-text {
  font-size: 12px;
  color: #fff;
  text-align: center; /* 文字居中 */
}

.img {
  width: 35px;
  height: 35px;
}

.last {
  width: 30px;
  height: 30px;
  margin: 3px 0;
}

/* 遮罩层样式 */
.uni-popup {
  z-index: 9998; /* 遮罩层 */
}

/* 中间弹窗样式 */
.center-popup {
  z-index: 9999 !important; /* 确保弹窗内容在遮罩层之上 */
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 300px;
  text-align: center;
  position: fixed; /* 确保弹窗居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.center-popup .title {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.center-popup .qr-code {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.center-popup .tip {
  font-size: 12px;
  color: #666;
}

/* 底部弹窗样式 */
.bottom-popup {
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  padding: 20px;
  text-align: center;
}

.bottom-popup .share-options {
  display: flex;
  justify-content: space-around;
}

.bottom-popup .share-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
  border: none;
}

.bottom-popup .share-button:active {
  background-color: #0056b3;
}

/* 弹窗内容样式 */
.share-popup {
  z-index: 9999; /* 弹窗内容 */
}
</style>